---
import ButtonA from "../../ButtonA.astro"
import MatrixCover from "../../MatrixCover.astro"
import H1 from "../../typography/h1.astro"
import QuoteSubTitle from "../../typography/QuoteSubTitle.astro"
---

<section class="relative flex w-full justify-center mb-24 lg:mb-48 -mt-[56px] md:-mt-[80px]">
  <div class="flex flex-col justify-center h-full gap-16 pt-24 md:pt-36 pb-8">
    <div class="flex flex-col text-left items-start gap-4">
      <div class="text-shadow">
        <H1>The Modular ZK<br />
          <span class="text-accent-500">Interop Layer</span></H1>
        <QuoteSubTitle>
          Connecting every blockchain, without compromising on security, efficiency,
          decentralization, or speed.
        </QuoteSubTitle>
      </div>
      <ButtonA href="https://app.union.build">DIVE IN >>></ButtonA>
    </div>
  </div>
  <div class="h-svh w-full">
    <MatrixCover />
  </div>
</section>
